---
title: 从Gridsome迁移到Astro
description: 将现有的Gridsome项目迁移到Astro的提示
sidebar:
  label: Gridsome
type: migration
stub: true
framework: Gridsome
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[Gridsome](https://gridsome.org) 是一个基于 Vue 和 GraphQL 构建的开源静态站点生成器。

## Gridsome 和 Astro 之间的关键相似点

Gridsome 和 Astro 有一些相似之处，这将帮助你迁移你的项目：

- Gridsome 和 Astro 都是现代 Javascript 静态网站生成器，具有相似的[项目文件结构](/zh-cn/basics/project-structure/#目录和文件)。 

- Gridsome 和 Astro 都使用`src/`文件夹存放你的项目文件，同时使用[特殊的`src/pages/`文件夹进行基于文件的路由](/zh-cn/basics/astro-pages/)。因此，为你的网站创建和管理页面应该会感到熟悉。

- Astro 有[对Vue组件的官方集成](/zh-cn/guides/integrations-guide/vue/)，并支持[安装NPM包](/zh-cn/guides/imports/#npm-包)，其中包括一些 Vue 的包。你可以编写 Vue UI 组件，并且可能可以保留你现有 Gridsome 项目中的一部分或全部 Vue 组件和依赖。

- Astro 和 Gridsome 都允许你使用 [无头（headless）CMS, APIs 或 Markdown 文件作为数据源](/zh-cn/guides/data-fetching/)。你可以继续使用你喜欢的内容创作系统，同时能保留你现有的内容。

## Gridsome 和 Astro 之间的关键差异

当你在 Astro 中重建你的 Gridsome 网站时，你会注意到一些重要的差别：

- Gridsome 是一个基于 Vue的单页应用程序（SPA）。而 Astro 站点是多页应用程序，它们使用[`.astro` 组件](/zh-cn/basics/astro-components/)构建，但也可以支持 [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/zh-cn/guides/framework-components/) 和原生HTML模板。

- 作为 SPA，Gridsome 使用`vue-router`进行 SPA 路由，并使用`vue-meta`管理`<head>`。在 Astro 中，你将创建独立的 HTML 页面，并直接控制你的页面`<head>`，或在[布局组件](/zh-cn/basics/layouts/)中控制。

- [本地文件数据](/zh-cn/guides/imports/)：Gridsome 使用 GraphQL 从你的项目文件中检索数据。Astro 使用 ESM imports 和[`import.meta.glob()`](/zh-cn/guides/imports/#importmetaglob)助手从本地项目文件中导入数据。远程资源可以使用标准的`fetch()`API加载。GraphQL 可以选择性添加到你的项目中，但默认情况下不包含。

## 从 Gridsome 切换到 Astro

要将 Gridsome 博客转换为 Astro，可以从我们的博客主题启动模板开始，或者在我们的[主题展示](https://astro.build/themes/)中查看更多社区博客主题。

你可以向`create astro`命令传递一个 `--template` 参数来使用我们的官方启动器开始一个新的 Astro 项目。或者，你可以[从 GitHub 上的任何现有 Astro 仓库开始一个新项目](/zh-cn/install-and-setup/#通过-cli-向导安装)。

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

将你现有的 Markdown 文件（或 MDX 文件，如果你选择了我们的可选集成）作为内容[创建 Markdown 或 MDX 页面](/zh-cn/guides/markdown-content/)。

由于 Gridsome 的项目结构与 Astro 的类似，你可能可以将你项目中的一些现有文件复制到你新的 Astro 项目的同一位置。然而，两个项目的结构并不完全相同。你可能想要查看[Astro 的项目结构](/zh-cn/basics/project-structure/)以了解有哪些差异。

由于 Astro 比 Gridsome 以不同的方式查询并导入你的本地文件，你可能想要阅读有关[如何使用`import.meta.glob()`加载文件](/zh-cn/guides/imports/#importmetaglob)的文章，以理解如何处理你的本地文件。

要转换其他类型的网站，例如作品集或文档网站，请在[astro.new](https://astro.new)上查看更多官方启动模板。你将找到每个项目的 GitHub 仓库链接，以及一键打开 IDX、StackBlitz、CodeSandbox 和 Gitpod 在线开发环境中的工作项目的链接。

## 社区资源

<CardGrid>

  <LinkCard title="从 Gridsome 迁移到 Astro" href="https://fyodor.io/migration-from-gridsome-to-astro/"/>

  <LinkCard title="你好 Astro!" href="https://thamas.hu/astro-hello"/>

</CardGrid>

## 社区资源

:::note[有想要分享的资源吗？]
如果你找到（或制作）了一个关于将 Gridsome 网站转换为 Astro 的有用的视频或博客文章，请将其 [添加到这个列表中](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx)！
:::

